<template>
  <div>
    <el-button type="primary" @click="addRow">新增</el-button>
    <el-button type="success" @click="addEditFn">保存</el-button>
    <el-table :data="tableData" style="width: 100%" @row-click="editRow">
      <el-table-column prop="name" label="姓名" width="150">
        <template #default="{ row }">
          <template v-if="row.editing">
            <el-input v-model="row.name" size="small" />
          </template>
          <template v-else>{{ row.name }}</template>
        </template>
      </el-table-column>

      <el-table-column prop="date" label="日期" width="180">
        <template #default="{ row }">
          <template v-if="row.editing">
            <el-date-picker style="width:100%" v-model="row.date" type="datetime" placeholder="选择日期" size="small" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
          </template>
          <template v-else>{{ row.date }}</template>
        </template>
      </el-table-column>

      <el-table-column prop="gender" label="性别" width="120">
        <template #default="{ row }">
          <template v-if="row.editing">
            <el-radio-group v-model="row.gender" size="small">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </template>
          <template v-else>{{ row.gender }}</template>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="状态" width="150">
        <template #default="{ row }">
          <template v-if="row.editing">
            <el-select v-model="row.status" placeholder="请选择" size="small">
              <el-option label="启用" value="启用" />
              <el-option label="禁用" value="禁用" />
            </el-select>
          </template>
          <template v-else>{{ row.status }}</template>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180">
        <template #default="{ row, $index }">
          <template v-if="row.editing">
            <!-- <el-button type="success" size="small" @click.stop="saveRow($index)">保存</el-button> -->
            <el-button size="small" @click.stop="cancelEdit($index)">取消</el-button>
          </template>
          <template v-else>
            <!-- <el-button type="primary" size="small" @click.stop="editRow(row, $index)">编辑</el-button> -->
            <el-button type="danger" size="small" @click.stop="deleteRow($index)">删除</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const tableData = reactive([
  { id: 1, name: '张三', date: '2024-06-01', gender: '男', status: '启用', editing: false, isNew: false },
  { id: 2, name: '李四', date: '2024-06-02', gender: '女', status: '禁用', editing: false, isNew: false }
])

// 用于生成唯一id
let nextId = 3

// 新增一行空数据并进入编辑状态
function addRow() {
  // 取消所有编辑状态
  // tableData.forEach(row => (row.editing = false))
  tableData.unshift({
    id: nextId++,
    name: '',
    date: '',
    gender: '',
    status: '',
    editing: true,
    isNew: true,
    _backup: null
  })
}

// 点击行编辑
function editRow(row, index) {
  if (typeof index === 'undefined') {
    index = tableData.findIndex(item => item === row)
  }
  // 取消其他行编辑
  // tableData.forEach((r, i) => {
  //   if (i !== index) r.editing = false
  // })
  // 备份数据
  // row._backup = { ...row }
  row.editing = true
}

// 保存编辑
function saveRow(index) {
  const row = tableData[index]
  // 简单校验
  if (!row.name) {
    alert('姓名不能为空')
    return
  }
  row.editing = false
  delete row._backup

  // 打印新增和编辑的数据
  if (row.isNew) {
    console.log('新增数据:', row)
    row.isNew = false // 标记为已保存
  } else {
    console.log('编辑数据:', row)
  }
}

// 取消编辑，恢复数据
function cancelEdit(index) {
  const row = tableData[index]
  if (row._backup) {
    Object.assign(row, row._backup)
    delete row._backup
  } else {
    // 新增行取消则删除
    tableData.splice(index, 1)
  }
  row.editing = false
}
const addEditFn = () => {
  let addEditData = tableData.filter(item => item.editing)
  console.log('测试数据打印addEditDataaddEditData', addEditData)
  tableData.forEach(i => (i.editing = false))
}

// 删除行
function deleteRow(index) {
  tableData.splice(index, 1)
}
</script>
